<template>
  <div class="hello">
    <div class="content_box">
      <van-field v-model="name" center placeholder="请输入搜索内容">
        <template #button>
          <van-button size="small" type="primary" @click="search">搜索</van-button>
        </template>
      </van-field>

      <div class="group" @click="groupShoe">选择分组：{{groupname}}</div>
      <van-tabs swipeable @click="tabClick" class="content">
        <van-tab v-for="index in classList" :title="index.name" :key="index.id" :name='index.id'>
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell center v-for="(item, index) in list" clickable :key="index" @click="CellClick(item)">
                <template v-if="item.type==1">
                  <span class="custom-title">{{item.content}}</span>

                </template>
                <template v-else-if="item.type==2">
                  <img :src="item.content" style="width:50px;height:50px">
                  <p class="custom-title">{{item.file_name}}</p>

                </template>
                <template v-else-if="item.type==3">
                  <p class="custom-title">{{item.title}}</p>
                  <img :src="item.cover" style="width:50px;height:50px">
                </template>
                <template v-else-if="item.type==5">
                  <p class="custom-title">{{item.file_name}}</p>
                </template>
                <template v-else-if="item.type==6">
                  <p class="custom-title">{{item.title}}</p>
                  <img :src="item.cover" style="width:50px;height:50px">
                </template>
                <template v-else-if="item.type==7">
                  <p class="custom-title">{{item.file_name}}</p>
                </template>
                <template v-else-if="item.type==8">
                  <p class="custom-title">{{item.title}}</p>
                  <img :src="item.cover" style="width:50px;height:50px">
                </template>
                <template #right-icon>
                  <van-radio :name="item" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-tab>
      </van-tabs>
    </div>

    <div class="button" @click="send()">
      发送
    </div>
    <van-popup v-model="show" round position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="show = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
  import {
    Button,
    Field,
    Popup,
    Picker,
    Tab,
    Tabs,
    Cell,
    CellGroup,
    Checkbox,
    CheckboxGroup,
    RadioGroup,
    Radio,
    Toast
  } from 'vant'
  import axios from 'axios';

  export default {
    components: {
      [Button.name]: Button,
      [Field.name]: Field,
      [Popup.name]: Popup,
      [Picker.name]: Picker,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [Toast.name]: Toast,
    },
    data: function () {
      return {
        name: '',
        classList: [],
        show: false,
        result: [],
        checked: '',
        columns: [],
        groupname: '所有',
        group_id: '',
        list: [],
        radio: '',
        couId: '',
        tabindex: '1',
        groupList: [],
        url: ''
      };
    },
    watch: {
      $route(to, from) {
        console.log(to.path);
      }
    },
    created() {
      var code = this.getUrlCode().code;
      this.getClass()
      // if (localStorage.getItem('user_id')) {
      //   this.getClass()
      // } else {
      //   if (code) {
      //     this.getmyId();
      //   } else {
      //     this.getAppid();
      //   }
      // }

    },

    methods: {
      CellClick(e) {
        this.radio = e;
      },
      search() {
        axios.post('../admin.php/app_get_content_engine', {
          type: 3,
          content_type: this.tabindex,
          group_id: this.group_id,
          keyword: this.name,
          page: 1,
          limit: 1000
        }).then(res => {
          if (res.data.code == 200) {
            this.list = res.data.data;
            if (this.list) {
              this.list.map((item, index) => {
                var formdata = new FormData();
                if (item.type == 1) {
                  formdata.append(`arr[${index}][content_engine_title]`, item.content);
                } else if (item.type == 3 || item.type == 6) {
                  formdata.append(`arr[${index}][content_engine_title]`, item.title);

                } else {
                  formdata.append(`arr[${index}][content_engine_title]`, item.file_name);
                }
                formdata.append(`arr[${index}][wx_user_id]`, localStorage.getItem('user_id'));
                formdata.append(`arr[${index}][wx_customer_id]`, this.couId);
                formdata.append(`arr[${index}][search_name]`, this.name);
                formdata.append(`arr[${index}][content_engine_group_id]`, item.content_group_id);
                formdata.append(`arr[${index}][content_engine_type]`, item.type);
                formdata.append(`arr[${index}][content_engine_id]`, item.id);
                formdata.append(`type`, 1)
                axios.post('../admin.php/content_operating', formdata, {
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  }
                }).then(res => {
                  if (res.data.code == 200) {

                  }
                })
              })
            }
          }
        })
      },
      getUrlCode() { // 截取url中的code方法
        var url = location.search
        var theRequest = new Object()
        if (url.indexOf("?") != -1) {
          var str = url.substr(1)
          var strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
          }
        }
        return theRequest
      },
      getAppid() {
        axios.post('../admin.php/get_code_staff_user', {
          code: ''
        }).then(res => {
          this.getCode(res.data.data);
        })
      },
      getCode(id) {
        // var id = 'WanQi'
        // console.log(id);
        var host = window.location.protocol + '//' + window.location.host;
        var url = encodeURI(host + '/chat-tool/index.html')
        var href =
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${id}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=#wechat_redirect`
        window.location.href = href


        //获取内容
      },
      getmyId() {
        axios.post('../admin.php/get_code_staff_user', {
          code: this.getUrlCode().code
        }).then(res => {
          if (res.data.code == 200) {
            localStorage.setItem('user_id', res.data.data.user_id)
            this.getClass();

          }
        })
      },
      getClass() {
        axios.post('http://huankemao.vip.brt360.com/admin.php/app_get_content_engine', {
          type: 1
        }).then(res => {
          if (res.data.code == 200) {
            this.classList = res.data.data;
            this.getGroup()
          }
        })
      },
      getGroup() {
        axios.post('http://huankemao.vip.brt360.com/admin.php/app_get_content_engine', {
          type: 2
        }).then(res => {
          if (res.data.code == 200) {
            this.columns = [];
            this.groupList = res.data.data;
            this.groupList.unshift({
              name: "全部",
              id: ''
            })
            this.groupList.map(item => {
              this.columns.push(item.name);
              this.getContent()
            })
          }
        })
      },
      getContent() {
        axios.post('http://huankemao.vip.brt360.com/admin.php/app_get_content_engine', {
          type: 3,
          content_type: this.tabindex,
          group_id: this.group_id,
          keyword: this.name,
          page: 1,
          limit: 1000
        }).then(res => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
      },
      Set(data) {
        // console.log(data)



      },
      //发送
      send() {
        var that = this;

        if (this.radio) {
          axios.post('../admin.php/get_js_sdk', {
            url: window.location.href.split('#')[0]
          }).then(res => {
            if (res.data.code == 200) {
              wx.config({
                beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.data.data.config.appId, // 必填，企业微信的corpID
                timestamp: res.data.data.config.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.data.config.nonceStr, // 必填，生成签名的随机串
                signature: res.data.data.config.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                jsApiList: ['sendChatMessage', 'getContext',
                  'getCurExternalContact'
                ] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
              });
              wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                that.getCon(res.data.data.agent);
              });

            }
          })
        } else {
          Toast.fail('请先选择数据');
        }

      },
      getCon(data) {
        var that = this;
        var host = window.location.protocol + '//' + window.location.host;
        that.url = encodeURI(host)
        wx.agentConfig({
          corpid: data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: data.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ['sendChatMessage', 'getContext', 'getCurExternalContact'], //必填
          success: function (res2) {

            //获取外部联系人id
            wx.invoke('getCurExternalContact', {}, function (res5) {
              console.log(res5)
              if (res5.err_msg == "getCurExternalContact:ok") {
                that.couId = res5.userId; //返回当前外部联系人userId
                wx.invoke('getContext', {}, function (res3) {
                  if (res3.err_msg == "getContext:ok") {
                    var entry = res3
                      .entry; //返回进入H5页面的入口类型，目前有normal、contact_profile、single_chat_tools、group_chat_tools
                    if (that.radio.type == '1') {
                      wx.invoke('sendChatMessage', {
                        msgtype: "text", //消息类型，必填
                        text: {
                          content: that.radio.content, //文本内容
                        }
                      }, function (res4) {
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    } else if (that.radio.type == '2') {
                      wx.invoke('sendChatMessage', {
                        msgtype: "image", //消息类型，必填
                        image: {
                          mediaid: that.radio.media_id, //图片的素材id
                        },
                      }, function (res4) {
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    } else if (that.radio.type == '3') {
                      wx.invoke('sendChatMessage', {
                        msgtype: "news", //消息类型，必填
                        news: {
                          link: that.url + "/article-preview/huankemao_h5.html?id=" +
                            that
                            .radio.id + '&type=1&userid=' + localStorage.getItem(
                              'user_id'), //H5消息页面url 必填
                          title: that.radio.title, //H5消息标题
                          desc: that.radio.summary, //H5消息摘要
                          imgUrl: that.radio.cover, //H5消息封面图片URL
                        },
                      }, function (res4) {
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    } else if (that.radio.type == '5') {
                      wx.invoke('sendChatMessage', {
                        msgtype: "video", //消息类型，必填
                        video: {
                          mediaid: that.radio.media_id, //视频的素材id
                        },
                      }, function (res4) {
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    } else if (that.radio.type == '6') {
                      wx.invoke('sendChatMessage', {
                        msgtype: "miniprogram", //消息类型，必填
                        miniprogram: {
                          appid: that.radio.applets_id, //小程序的appid
                          title: that.radio.title, //小程序消息的title
                          imgUrl: that.radio
                            .cover, //小程序消息的封面图。必须带http或者https协议头，否则报错 $apiName$:fail invalid imgUrl
                          page: that.radio.applets_path, //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
                        },
                      }, function (res4) {
                        // console.log(res4)
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    } else if (that.radio.type == '7') {
                      wx.invoke('sendChatMessage', {
                        msgtype: "file", //消息类型，必填
                        file: {
                          mediaid: that.radio.media_id, //文件的素材id
                        },
                      }, function (res4) {
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    } else if (that.radio.type == '8') {
                      console.log(that.radio)
                      wx.invoke('sendChatMessage', {
                        msgtype: "news", //消息类型，必填
                        news: {
                          link: that.radio.link, //H5消息页面url 必填
                          title: that.radio.title, //H5消息标题
                          desc: that.radio.summary, //H5消息摘要
                          imgUrl: that.radio.cover, //H5消息封面图片URL
                        },
                      }, function (res4) {
                        console.log(res4)
                        if (res4.err_msg == 'sendChatMessage:ok') {
                          //发送成功
                          that.sendTime(that.radio);
                        }
                      })
                    }

                  } else {
                    //错误处理
                  }
                });



              } else {
                //错误处理
              }
            });


          },
          fail: function (err) {
            console.log(err)
          }
        });
      },
      sendTime(data) {
        var formdata = new FormData();

        if (data.type == '1') {
          formdata.append('arr[0][wx_user_id]', localStorage.getItem('user_id'));
          formdata.append('arr[0][wx_customer_id]', this.couId);
          formdata.append('arr[0][search_name]', '');
          formdata.append('arr[0][content_engine_group_id]', data.content_group_id);
          formdata.append('arr[0][content_engine_title]', data.content);
          formdata.append('arr[0][content_engine_type]', data.type);
          formdata.append('arr[0][content_engine_id]', data.id);
          formdata.append('type', 2)
        } else if (data.type == 3 || data.type == 6) {
          formdata.append('arr[0][wx_user_id]', localStorage.getItem('user_id'));
          formdata.append('arr[0][wx_customer_id]', this.couId);
          formdata.append('arr[0][search_name]', '');
          formdata.append('arr[0][content_engine_group_id]', data.content_group_id);
          formdata.append('arr[0][content_engine_title]', data.title);
          formdata.append('arr[0][content_engine_type]', data.type);
          formdata.append('arr[0][content_engine_id]', data.id);
          formdata.append('type', 2)
        } else {
          formdata.append('arr[0][wx_user_id]', localStorage.getItem('user_id'));
          formdata.append('arr[0][wx_customer_id]', this.couId);
          formdata.append('arr[0][search_name]', '');
          formdata.append('arr[0][content_engine_group_id]', data.content_group_id);
          formdata.append('arr[0][content_engine_title]', data.file_name);
          formdata.append('arr[0][content_engine_type]', data.type);
          formdata.append('arr[0][content_engine_id]', data.id);
          formdata.append('type', 2)
        }



        axios.post('../admin.php/content_operating', formdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
          if (res.data.code == 200) {
            window.location.href = "about:blank";
            window.close();
          }
        })
      },
      groupShoe() {
        this.show = true
      },
      tabClick(name, title) {
        this.tabindex = name;
        this.getContent()
      },

      onConfirm(value) {
        this.show = false;
        this.groupname = value;
        this.group_id = this.groupList.filter(item => item.name == this.groupname)[0].id;
        this.getContent()

      }
    },
  };
</script>

<style lang='less'>
  body {
    margin: 0;
    padding: 0;

  }

  .hello {
    // height: 100%-50px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;

    // box-sizing: border-box;
    .content_box {
      position: relative;
      width: 100%;

      padding: 10px 10px 55px 10px;
      box-sizing: border-box;

      /deep/.van-field__control {
        height: 32px;
      }

      /deep/.van-tab--active {
        color: #6881ec !important;
        font-weight: bold;
      }

      /deep/.van-cell:after {
        left: 0;
        right: 0;
      }

      .van-button {
        background: #6881ec;
        border: 1px solid #6881ec;
      }

      .van-tab {
        justify-content: flex-start;
        padding: 0 20px 0 0;
      }

      /deep/.van-tabs__nav--complete {
        padding: 0 0 15px 0;
      }

      .van-tabs__line {
        display: none;
      }

      .van-radio__icon .van-icon {
        width: 1rem;
        height: 1rem;
        font-size: .7em;
      }
    }

    .content {
      p {
        margin: 0;
      }
    }

    .button {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      background-color: #6881ec;
      text-align: center;
      line-height: 50px;
      color: #fff;

      .van-checkbox {
        position: absolute;
        left: 30px;
        top: 30%;

        .van-checkbox__label {
          color: #fff;

        }
      }

      p {
        color: #fff;
        position: absolute;
        left: 50%;
      }
    }

    .van-cell {
      padding: 10px 0;
    }

    .van-field__control {
      background-color: rgb(243, 243, 243);
      color: #000;
    }

    .group {
      margin: 10px 0;
      font-size: 14px;
      color: #333;
    }

    .custom-title {
      display: block;
      width: 200px !important;
      margin-right: 4px;
      overflow: hidden;
      /*超出部分隐藏*/
      white-space: nowrap;
      /*不换行*/
      text-overflow: ellipsis;
      /*超出部分文字以...显示*/
    }

    .search-icon {
      font-size: 16px;
      line-height: inherit;
    }
  }
</style>